<template>
	<custom-form-layout>
		<fui-form ref="form" :show="false">

			<fui-form-item :label="`IP地址${index+1}`" v-for="(item,index) in formData.subList" :key="index">
				<fui-input v-model="item.ipAddress" text-right :padding="['0','16rpx']" :borderBottom="false"
					placeholder="请输入IP地址"></fui-input>
				<template v-slot:right>
					<fui-button :disabled="index===0" background="#FFF0ED" color="#D54941" bold width="100rpx"
						height="64rpx" :size="28" text="删除" @click="onDel(index)"></fui-button>
				</template>
			</fui-form-item>

			<fui-form-item label="所属科室" arrow :bottom-border="false" prop="deptId">
				<!-- 	<fui-input :borderBottom="false" readonly :padding="[0]" text-right :placeholderStyle="{
					color:'#0052D9'}" placeholder="请选择" v-model="formData.deptId" @click="choseDept"></fui-input> -->
				<template #right>
					<fui-text color="#0052D9" :text="labelDept" @click="choseDept"></fui-text>
				</template>
			</fui-form-item>
			<fui-form-item>
				<fui-button @click="addIp">
					添加IP
				</fui-button>
			</fui-form-item>
		</fui-form>


		<template #footer>
			<fui-row :gutter="32">
				<fui-col :span="6">
					<fui-button background="#F2F3FF" color="#0052D9" @click="cancel">
						取消
					</fui-button>
				</fui-col>
				<fui-col :span="18">
					<fui-button @click="add">
						提交
					</fui-button>
				</fui-col>

			</fui-row>

		</template>
	</custom-form-layout>
</template>

<script>
	import {
		useDeptStore
	} from '../../store/modules/dept'
	import {
		FormDeptStoreKey
	} from '../../store/sotreKey'
	import {
		mapState,
		mapWritableState
	} from 'pinia'
	import {
		customValue,
		DeptSelectChoseType,
		toDeptSelectPage
	} from '../../utils/util'
	import {
		ReportApi
	} from '../../api/report'
	import form from '@/components/firstui/fui-validator/fui-validator'
	import {
		useAddIp
	} from '../../store/modules/addIp'
	import {
		SubPages
	} from '../../config/router-config'
	export default {
		name: 'addIp',
		data() {
			return {
				backToPath: null,
				deptName: null,
				deptId: null,

			}
		},
		computed: {
			...mapState(useDeptStore, ['deptStoreKey']),
			...mapWritableState(useAddIp, ['formData']),
			labelDept() {
				const {
					label,
					value
				} = this.deptStoreKey[FormDeptStoreKey.IpDept.key]

				this.formData.deptId = customValue(value).value || this.deptId
				return label || this.deptName
			},
		},
		onLoad(options) {
			this.deptId = options.deptId
			this.deptName = options.deptName
			this.backToPath = options.backToPath
		},
		onShow() {

		},
		methods: {
			onDel(index) {
				this.formData.subList.splice(index, 1)
			},
			choseDept() {
				toDeptSelectPage(FormDeptStoreKey.IpDept.key, DeptSelectChoseType.selectDept, false)
			},
			cancel() {
				uni.redirectTo({
					url: this.backToPath
				})
			},
			addIp() {
				this.formData.subList.push({
					ipAddress: ''
				})
			},
			async add() {

				let isPassed = false
				let msg = ''
				for (let i of this.formData.subList) {
					const rules = {
						name: `ipAddress`,
						rule: ["required"],
						msg: ["请输入IP"],
						validator: [{
							msg: 'IP格式错误',
							method: (str) => {
								const pattern = new RegExp(
									/((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/g
								)

								return pattern.test(str)
							}
						}]
					}
					const valid = form.validator(i, [rules])
					isPassed = valid.isPassed
					msg = valid.errorMsg

				}
				if (isPassed) {
					try {
						await ReportApi.addDeptIp(this.formData)
						uni.showToast({
							title: '添加成功'
						})
						useAddIp().$reset()
						uni.redirectTo({
							url: this.backToPath
						})
					} catch (err) {
						console.err(err);
					}

				} else {
					this.fui.toast(msg)
				}



			}
		},

	}
</script>

<style>

</style>